<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 120px; box-sizing: border-box;">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
								:disabled="formReadOnly">
								<div style="text-align:center">
									<h3 style="font-weight: bold;color: black;font-size:24px">物资领用申请单</h3>
								</div>
								<table
									style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请人</td>
										<td class="width-30">
											<el-form-item prop="applyuser.id">
												<user-select :limit='1' :value="inputForm.applyuser.id"
													@getValue='(value) => {inputForm.applyuser.id=value}' disabled>
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="company.id">
												<SelectTree ref="company" :props="{
                                                  value: 'id',             // ID字段名
                                                  label: 'name',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.company.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.company.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请时间</td>
										<td class="width-30">
											<el-form-item prop="applytime">
												<el-date-picker v-model="inputForm.applytime" type="datetime"
													style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="请选择" disabled></el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="depart.id">
												<SelectTree ref="depart" :props="{
                                                    value: 'id',             // ID字段名
                                                    label: 'name',         // 显示名称
                                                    children: 'children'    // 子级字段名
                                                  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.depart.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.depart.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr style="height: 80px;line-height: 80px">
										<td class="width-15 active" style="line-height: 80px">备注
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item prop="remarks">
												<el-input type="text" v-model="inputForm.remarks"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											领用信息
										</td>
									</tr>
									<tr>
										<td colspan="2" style="text-align: left;padding: 0px 24px;position: relative;font-size: 12px;">
											<el-form-item label="物资类型" prop="fixedtype" :rules="[{required: true, message:'物资类型不能为空', trigger:'blur'}]" label-width="80px">
												<el-select v-model="inputForm.fixedtype" placeholder="请选择" >
													<el-option v-for="item in $dictUtils.getDictList('fiexd_type')" :key="item.value" :label="item.label" :value="item.value"></el-option>
												</el-select>
											</el-form-item>
										</td>
										<td colspan="2" class="addDelImg">
											<i v-if="this.showButton" id="add" @click="add"
												class="el-icon-circle-plus"></i>
											<i v-if="this.showButton" id="sub" @click="delAll"
												class="el-icon-remove"></i>
										</td>
									</tr>
									<tr>
										<td colspan="4" class="elTable">
											<div style="width:100%">
												<!-- <el-button size="small" @click="addOaConsumablesRow" type="primary">新增</el-button> -->
												<el-table :data="tables" size="small" row-key="id"
													style="border-collapse:collapse;" :cell-style="cellStyle_attached"
													ref="mytables" :row-class-name="tableRowClassName"
													:header-cell-class-name="cellHeadStyle_attached"
													:tree-props="{ children: 'children', hasChildren: 'hasChildren'}">
													<el-table-column type="selection" width="50" align="center">
													</el-table-column>
													<el-table-column prop="goodsName" header-align="center"
														align="center" show-overflow-tooltip label="物品名称">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>物品名称</span>
														</template>
														<template slot-scope="scope">
															<GridSelects title="物资信息" labelName = 'assetsName
															' labelValue = 'id' :value = "scope.row.goodsName" :limit="1"
																@getValue='getValuaes(arguments,scope.$index)'
																:columns="[{ prop: 'assetsNumber', label: '资产编码' }, { prop: 'assetsName', label: '物品名称' }, { prop: 'specificate', label: '规格' }, { prop: 'unit', label: '单位' } ]" 	
																:dataListUrl="'/dlyrl/oa/fixedassets/fixedAssets/findFixedAssets?company='+companyId"
																entityBeanName="FixedAssets">
															</GridSelects>
														</template>
													</el-table-column>
													<el-table-column prop="assetsNumber" header-align="center" align="center"
														show-overflow-tooltip label="资产编码">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>资产编码</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.assetsNumber" disabled></el-input>
														</template>
													</el-table-column>
													<el-table-column prop="norms" header-align="center" align="center"
														show-overflow-tooltip label="规格">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>规格</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.norms" disabled></el-input>
														</template>
													</el-table-column>
													<el-table-column prop="unit" header-align="center" align="center"
														show-overflow-tooltip label="单位">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>单位</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.unit" disabled></el-input>
														</template>
													</el-table-column>
													<!-- <el-table-column prop="number" header-align="center" align="center"
														show-overflow-tooltip label="数量">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>数量</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.number"></el-input>
														</template>
													</el-table-column> -->
													<el-table-column prop="used" header-align="center" align="center"
														show-overflow-tooltip label="用途">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>用途</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.used"></el-input>
														</template>
													</el-table-column>
													<el-table-column prop="remarks" header-align="center" align="center"
														show-overflow-tooltip label="说明">
														<template slot="header">
															<span style="color: red">*&nbsp;</span>
															<span>说明</span>
														</template>
														<template slot-scope="scope">
															<el-input v-model="scope.row.remarks"></el-input>
														</template>
													</el-table-column>
													<!-- <el-table-column
                                          fixed="right"
                                          label="操作"
                                          width="150">
                                          <template slot-scope="scope">
                                            <el-button @click="viewOaConsumablesRow(scope.row)" type="text" size="mini">查看</el-button>
                                            <el-button  @click="editOaConsumablesRow(scope.row)" type="text" size="mini">编辑</el-button>
                                            <el-button  @click="delOaConsumablesRow(scope.row)" type="text" size="mini">删除</el-button>
                                          </template>
                                        </el-table-column>                             -->
												</el-table>
											</div>
										</td>
									</tr>
								</table>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<OaConsumablesForm ref="oaConsumablesForm" @addRow="saveOaConsumablesRow(arguments)"></OaConsumablesForm>
	</div>
</template>
<script>
	import tableStyles from '../../../../../utils/mixins.js'
	import OaConsumablesForm from './OaConsumablesForm'
	import UserSelect from '@/components/userSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	import GridSelects from '@/components/gridSelect/indexs.vue'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				companyId:this.$store.state.user.companyId,
				title: '',
				method: '',
				loading: false,
				inputForm: {
					id: '',
					oaConsumablesList: [],
					applyuser: {
						id: ''
					},
					company: {
						id: ''
					},
					applytime: '',
					depart: {
						id: ''
					},
					remarks: '',
					fixedtype:'',//物资类型	
				},
				dataListUrl:'',
				tables: [{
					goodsName: '', //物品名称
					assetsNumber:'',//资产编码
					norms: '', //规格
					unit: '', //单位
					number: '', //数量
					used: '', //用途
					actreportmoney: '', //实报金额
					// remarks:'',//备注
				}], //附表
				showButton: true, //按钮显示与否
			}
		},
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			}
		},
		components: {
			UserSelect,
			SelectTree,
			OaConsumablesForm,
			GridSelects
		},
		watch: {
			'businessId': {
				handler(newVal) {
					if (this.businessId) {
						this.init(this.businessId)
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields();
							if (this.$store.state.user.id != '') {
								var users = this.$store.state.user
							} else {
								var users = JSON.parse(sessionStorage.getItem("userInfo"));
							}
							this.inputForm.applyuser.id = users.id;
							this.inputForm.company.id = users.company.id;
							this.inputForm.depart.id = users.office.id;
							this.inputForm.applytime = this.getNowTime();
						})
					}
				},
				immediate: true,
				deep: false
			}
		},
		created() {
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem("userInfo", JSON.stringify(this.$store.state.user))
			})
		},
		methods: {
			init(id) {
				if (id) {
					this.inputForm.oaConsumablesList = []
					this.loading = true
					this.inputForm.id = id
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields()
						this.$http({
							url: `/dlyrl/oa/materialprocess/oaMaterialProcess/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.oaMaterialProcess);
							this.tables = data.oaMaterialProcess.oaConsumablesList;
							this.loading = false;
							if (this.$route.query.readOnly == 'true') {
								this.showButton = false;
							}
						})
					})
				}
			},
			fiexdTypes(val){
				this.dataListUrl="/dlyrl/oa/fixedassets/fixedAssets/findFixedAssets?company="+this.$store.state.user.companyId;
			},
			getValuaes(data,index){
				console.log(data,index)
				this.tables[index].goodsName=data[0];
				this.tables[index].norms=data[1].specificate;
				this.tables[index].unit=data[1].unit;
				this.tables[index].assetsNumber=data[1].assetsNumber;
			},
			saveOaConsumablesRow(child) {
				if (child[0] === '') {
					this.inputForm.oaConsumablesList.push(child[1])
				} else {
					this.inputForm.oaConsumablesList.forEach((item, index) => {
						if (item === child[0]) {
							this.inputForm.oaConsumablesList.splice(index, 1, child[1])
						}
					})
				}
			},
			addOaConsumablesRow(child) {
				this.$refs.oaConsumablesForm.init('add')
			},
			viewOaConsumablesRow(child) {
				this.$refs.oaConsumablesForm.init('view', child)
			},
			editOaConsumablesRow(child) {
				this.$refs.oaConsumablesForm.init('edit', child)
			},
			delOaConsumablesRow(child) {
				this.inputForm.oaConsumablesList.forEach((item, index) => {
					if (item === child && item.id === '') {
						this.inputForm.oaConsumablesList.splice(index, 1)
					} else if (item === child) {
						item.delFlag = '1'
						this.inputForm.oaConsumablesList.splice(index, 1, item)
					}
				})
			},
			// 表单提交
			saveForm(callback) {
				for (let i = 0; i < this.tables.length; i++) {
					if (!this.tables[i].goodsName) {
						this.$message.warning('请选择第' + Number(i + 1) + '条信息的物品名称');
						return false;
					}
					if (!this.tables[i].norms) {
						this.$message.warning('请选择第' + Number(i + 1) + '条信息的规格');
						return false;
					}
					if (!this.tables[i].unit) {
						this.$message.warning('请填写第' + Number(i + 1) + '条信息的单位');
						return false;
					}
					if (!this.tables[i].used) {
						this.$message.warning('请填写第' + Number(i + 1) + '条信息的用途');
						return false;
					}
					if (!this.tables[i].remarks) {
						this.$message.warning('请填写第' + Number(i + 1) + '条信息的说明');
						return false;
					}
				}
				this.inputForm.oaConsumablesList = this.tables;
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/materialprocess/oaMaterialProcess/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							if (data && data.success) {
								callback(data.businessTable, data.businessId);
								this.loading = false;
								this.$refs.inputForm.resetFields();
								this.inputForm.applyuser.id = this.$store.state.user.id;
								this.inputForm.company.id = this.$store.state.user.company.id;
								this.inputForm.depart.id = this.$store.state.user.office.id;
								this.inputForm.applytime = this.getNowTime();
							}
						})
					}
				})
			},

			//添加
			add() {
				let i = this.tables.length
				if ((i == 0) || (this.tables[i - 1].goodsName != '' && this.tables[i - 1].norms != '' && this.tables[i - 1]
						.unit != '' && this.tables[i - 1].number != '' && this.tables[i - 1].used != '')) {
					let addTable = {
						goodsName: '', //物品名称
						norms: '', //规格
						unit: '', //单位
						number: '', //数量
						used: '', //用途
						// remarks:'',//备注
					}
					this.tables.push(addTable)
				} else {
					this.$message.warning('请先填写当前已有行所有必填数据');
				}
			},
			//添加行序号
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex;
			},
			//删除
			delAll() {
				// var items = document.getElementsByClassName("el-checkbox__original");
				// for (var j = 1; j < items.length; j++) {
				//     if (items[j].checked) //如果item被选中
				//     {
				//         var baba = items[j].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
				//         var erzi = items[j].parentNode.parentNode.parentNode.parentNode.parentNode
				//         baba.removeChild(erzi);
				//         j--;
				//     }
				// }
				for (var i = this.$refs.mytables.selection.length - 1; i >= 0; i--) {
					this.tables.splice(this.$refs.mytables.selection[i].index, 1)
				}
				this.$refs.mytables.clearSelection();
			},
		}
	}
</script>
